<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Hello</title>
    <script type="text/javascript" src="https://rawgit.com/jashkenas/underscore/master/underscore.js"></script>
    <script type="text/javascript" src="/dist/intact.js"></script>
</head>
<body>
<script type="text/javascript">
    // emulate api
    var api = {
        getData: function() {
            return new Promise(function(resolve, reject) {
                setTimeout(function() {
                    resolve({'name': 'Javey'});
                }, 1000);
            });
        }
    };

    var Widget = Intact.extend({
        defaults: {
            name: ''
        },

        template: 'console.log(self.get("name"));<h1 ev-click={self.change.bind(self)}>Hello {self.get("name")}!</h1>',

        _init: function() {
            // return a promise
            return api.getData().then(function(data) {
                this.set('name', data.name);
            }.bind(this));
        },

        _create: function() {
            var text = document.createElement('div');
            text.innerHTML = 'Created';
            this.element.appendChild(text);
        },

        _update: function() {
            var text = document.createElement('div');
            text.innerHTML = 'Updated';
            this.element.appendChild(text);
        },

        _destroy: function(dom) {
            console.log('destroy');
        },

        change: function() {
            this.set('name', 'everyone')
        }
    });

    var widget = Intact.mount(Widget, document.body);
</script>
</body>
</html>
